<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="../lib/layui/css/layui.css">
  <link rel="stylesheet" href="../styles/css/index.css">
</head>
<style>
  .bewinput .layui-input {
    display: inline-block;
    width: 100px;
  }

  .layui-form-label {
    float: left;
    display: block;
    padding: 9px 3px;
    width: 104px;
    font-weight: 400;
    line-height: 20px;
    text-align: right;
  }
</style>
<body>
  <div class="''">
    <div class="headTitle">
      作业知识库
    </div>
    <div class="w-title"><span class="w-blueline"></span>
      <a href="###"></a>
    </div>
    <form action="" class="layui-form">
      <div class="layui-row">
        <div class="layui-col-md4">
          <div class="layui-form-item">
            <label class="layui-form-label">农艺措施 ：</label>
            <div class="layui-input-block">
              <input type="text" name="title" required="" lay-verify="required" placeholder="请输入" autocomplete="off"
                     class="layui-input">
            </div>
          </div>
        </div>
        <div class="layui-col-md4">
          <div class="layui-form-item">
            <label class="layui-form-label">农艺措施 ：</label>
            <div class="layui-input-block">
              <input type="text" name="title" required="" lay-verify="required" placeholder="请输入所属类型" autocomplete="off"
                     class="layui-input">
            </div>
          </div>
        </div>
      </div>
      <div class="layui-row">
        <div class="layui-col-md4">
          <div class="layui-form-item">
            <label class="layui-form-label">所属类型 ：</label>
            <div class="layui-input-block">
              <select name="sec" required="" lay-verify="required">
                <option value="">请选择</option>
                <option value="1">请选择</option>
              </select>
            </div>
          </div>
        </div>
        <div class="layui-col-md4">
          <div class="layui-form-item">
            <label class="layui-form-label">农时 ：</label>
            <div class="layui-input-block bewinput">
              <input type="text" class="layui-input" id="test4" placeholder="请选择">
              至
              <input type="text" class="layui-input" id="test5" placeholder="请选择">
            </div>
          </div>
        </div>
        <div class="layui-col-md1">&nbsp;</div>
        <div class="layui-col-md3">

          <!-- <a href="###" class="layui-btn">导入</a> -->
        </div>
      </div>
      <div class="layui-row">
        <div class="layui-col-md4">
          <div class="layui-form-item">
            <label class="layui-form-label">叶长 ：</label>
            <div class="layui-input-block bewinput">
              <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input"> 至
              <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
          </div>
        </div>
        <div class="layui-col-md4">
          <div class="layui-form-item">
            <div class="layui-form-item">
              <label class="layui-form-label">分蘖数 ：</label>
              <div class="layui-input-block bewinput">
                <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input"> 至
                <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input">
              </div>
            </div>
          </div>
        </div>
        <div class="layui-col-md1">&nbsp;</div>
        <div class="layui-col-md3">
        </div>
      </div>
      <div class="layui-row bewinput" style="padding-bottom: 20px">
        <div class="layui-col-md4">
          <label class="layui-form-label">叶龄 ：</label>
          <div class="layui-input-block">
            <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input"> 至
            <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-col-md4">
          <label class="layui-form-label">叶色(饱和度)：</label>
          <div class="layui-input-block">
            <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input"> 至
            <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-col-md4">
        </div>
      </div>
      <div class="layui-row bewinput" >
        <div class="layui-col-md4">
          <label class="layui-form-label">有效光合面积 ：</label>
          <div class="layui-input-block">
            <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input"> 至
            <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-col-md4">
          <div class="layui-form-item">
            <label class="layui-form-label">叶色(色度)：</label>
            <div class="layui-input-block">
              <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input"> 至
              <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
          </div>
        </div>
        <div class="layui-col-md4">
          <label class="layui-form-label"></label>
          <button class="layui-btn" lay-submit lay-filter="formDemo">查询</button>
          <button class="layui-btn layui-btn-primary">重置</button>
          <a href="zyzskadd.html" class="layui-btn">添加</a>
        </div>
      </div>
    </form>
    <div>
      <table id="demoTable" lay-filter="test"></table>
    </div>
  </div>
  <script src="../lib/layui/layui.js"></script>
  <script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  </script>
  <script>
    layui.use(['table', 'jquery'], function () {
      var table = layui.table;
      var $ = jQuery = layui.$;
      //第一个实例
      table.render({
        elem: '#demoTable',
        //					height: 315
        //  ,url: '/demo/table/user/' //数据接口
          //						,
          page: true //开启分页
          ,
          cols: [
              [ //表头
                  {
                      field: 'id',
                      title: '序号',
                      width: '10%',
                      align: 'center',
                      fixed: 'left'
                  }, {
                  field: 'username',
                  title: '叶龄',
                  align: 'center',
                  width: '10%'
              }, {
                  field: 'sex',
                  title: '叶长',
                  align: 'center',
                  width: '10%',
              }, {
                  field: 'dklx',
                  title: '分蘖数',
                  align: 'center',
                  width: '10%',
              }, {
                  field: 'city',
                  title: '有效光合面积',
                  align: 'center',
                  width: '10%'
              },
                  {
                      field: 'city',
                      title: '叶色(饱和度)',
                      align: 'center',
                      width: '10%'
                  },
                  {
                      field: 'city',
                      title: '叶色(色度)',
                      align: 'center',
                      width: '10%'
                  },{
                  field: 'city',
                  title: '农艺措施',
                  align: 'center',
                  width: '10%'
                  },
                  {
                      field: 'experience',
                      title: '操作',
                      width: '20%',
                      align: 'center',
                      toolbar: '#barDemo'
                  }
              ]
          ],
        data: [
            {
          "id": "10001",
          "username": "地块",
          "email": "xianxin@layui.com",
          "sex": "男",
          "dklx": "水田",
          "city": "浙江杭州",
          "sign": "人生恰似一场修行",
          "experience": "116",
          "ip": "192.168.0.8",
          "logins": "108",
          "area": "价目是",
          "shzt": "2016-10-14"
        }, {
          "id": "10002",
          "username": "地块",
          "email": "xianxin@layui.com",
          "sex": "男",
          "dklx": "水田",
          "city": "浙江杭州",
          "sign": "人生恰似一场修行",
          "experience": "12",
          "ip": "192.168.0.8",
          "logins": "106",
          "area": "价目是",
          "shzt": "2016-10-14",
        }, {
          "id": "10003",
          "username": "地块",
          "email": "xianxin@layui.com",
          "sex": "男",
          "dklx": "水田",
          "city": "浙江杭州",
          "sign": "人生恰似一场修行",
          "experience": "65",
          "ip": "192.168.0.8",
          "logins": "106",
          "area": "价目是",
          "shzt": "2016-10-14"
        }, {
          "id": "10004",
          "username": "地块",
          "email": "xianxin@layui.com",
          "sex": "男",
          "dklx": "水田",
          "dklx": "水田",
          "city": "浙江杭州",
          "sign": "人生恰似一场修行",
          "experience": "666",
          "ip": "192.168.0.8",
          "logins": "106",
          "area": "价目是",
          "shzt": "2016-10-14"
        }, {
          "id": "10005",
          "username": "地块",
          "email": "xianxin@layui.com",
          "sex": "男",
          "dklx": "水田",
          "city": "浙江杭州",
          "sign": "人生恰似一场修行",
          "experience": "86",
          "ip": "192.168.0.8",
          "logins": "106",
          "area": "价目是",
          "shzt": "2016-10-14"
        }, {
          "id": "10006",
          "username": "地块",
          "email": "xianxin@layui.com",
          "sex": "男",
          "dklx": "水田",
          "city": "浙江杭州",
          "sign": "人生恰似一场修行",
          "experience": "12",
          "ip": "192.168.0.8",
          "logins": "106",
          "area": "价目是",
          "shzt": "2016-10-14"
        }, {
          "id": "10007",
          "username": "地块",
          "email": "xianxin@layui.com",
          "sex": "男",
          "dklx": "水田",
          "city": "浙江杭州",
          "sign": "人生恰似一场修行",
          "experience": "16",
          "ip": "192.168.0.8",
          "logins": "106",
          "area": "价目是",
          "shzt": "2016-10-14"
        }, {
          "id": "10008",
          "username": "地块",
          "email": "xianxin@layui.com",
          "sex": "男",
          "dklx": "水田",
          "city": "浙江杭州",
          "sign": "人生恰似一场修行",
          "experience": "106",
          "ip": "192.168.0.8",
          "logins": "106",
          "area": "价目是",
          "shzt": "2016-10-14"
        }]
      });
      table.on('tool(test)', function (obj) { //表格操作回调
        var layEvent = obj.event
        if (layEvent === 'del') {
          $(this).closest('tr').remove();
        } else if (layEvent === 'edit') {
          console.log(obj)
        } else if (layEvent === 'detail') {
          console.log(obj)
        }
      })
    });
    layui.use('laydate', function () {
        var laydate = layui.laydate;

        //时间选择器
        laydate.render({
            elem: '#test4'
            ,type: 'time'
            ,format:'HH:mm'
        });

        //时间选择器
        laydate.render({
            elem: '#test5'
            ,type: 'time'
            ,format:'HH:mm'
        });
    });
    layui.use('form', function () {
        var form = layui.form;
        //监听提交
        form.on('submit(formDemo)', function (data) { //提交事件回调
            layer.msg(JSON.stringify(data.field));
            return false;
        });
    });
  </script>
</body>

</html>
